<style>
  :host {
    --cr-theme-icon-size: 72px;
    cursor: pointer;
    display: block;
  }

  :host,
  svg {
    height: var(--cr-theme-icon-size);
    width: var(--cr-theme-icon-size);
  }

  #ring {
    fill: rgba(var(--google-blue-600-rgb), 0.4);
    visibility: hidden;
  }

  #checkMark {
    visibility: hidden;
  }

  :host([selected]) #ring,
  :host([selected]) #checkMark {
    visibility: visible;
  }

  #circle {
    fill: url(#gradient);
    stroke: var(--cr-theme-icon-stroke-color,
        var(--cr-theme-icon-frame-color));
    stroke-width: 1;
  }

  #leftColor {
    stop-color: var(--cr-theme-icon-active-tab-color);
  }

  #rightColor {
    stop-color: var(--cr-theme-icon-frame-color);
  }

  #checkMark circle {
    fill: var(--google-blue-600);
  }

  #checkMark path {
    fill: white;
  }

  @media (prefers-color-scheme: dark) {
    #checkMark circle {
      fill: var(--google-blue-300);
    }

    #checkMark path {
      fill: var(--google-grey-900);
    }
  }

  :host-context([dir='rtl']) #checkMark {
    transform: translateX(3.5px);
  }
</style>
<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gradient" gradientUnits="objectBoundingBox"
        x1="50%" y1="0" x2="50.01%" y2="0">
      <stop id="leftColor" offset="0%"></stop>
      <stop id="rightColor" offset="100%"></stop>
    </linearGradient>
  </defs>
  <circle id="ring" cx="36" cy="36" r="36"></circle>
  <circle id="circle" cx="36" cy="36" r="32"></circle>
  <g id="checkMark" transform="translate(48.5, 3.5)">
    <circle cx="10" cy="10" r="10"></circle>
    <path d="m 2.9885708,9.99721 5.0109458,4.98792 0.00275,-0.003
        0.024151,0.0227 8.9741604,-9.01557 -1.431323,-1.42476 -7.5742214,7.6092
        -3.6031671,-3.58665 z">
    </path>
  </g>
</svg>
